<template>
	<div class="detail-container p-r">
		<div class='detail-card dis-flex'>
			<div class="card-hd">
				<div class="p-r hour-bg">
					<div class="dis-flex hour-content align-center" style="overflow:hidden">
						<div class="hour-content-img">
							<img src="@/assets/yl_img1.png" class="hour-img" />
						</div>
						<div class="flex-1 hour-name">
							<div class="ft-32 ml-20">{{info.lottery_name}}</div>
						</div>
					</div>
					<div class="circle-d circle-l  p-a"></div>
					<div class="circle-d circle-r  p-a"></div>
				</div>
			</div>
			<div class="card-bd flex-1 p-r">
				<div class="card-bd-lists-1 ">
					<div class="card-bd-list dis-flex">
			            <div class="card-bd-list-tit">
			              	追号玩法
			            </div>
			            <div class="card-bd-list-ct flex-1">
			              	{{info.lottery_play_name}}
			            </div>
			        </div>
			        <div class="card-bd-list dis-flex">
			            <div class="card-bd-list-tit">
			              	追号号码
			            </div>
			            <div class="card-bd-list-ct flex-1">
			              	<div v-for="num in info.selonArr" class="cirle">{{num}}</div>
			            </div>
			        </div>
			        <div class="card-bd-list dis-flex">
			            <div class="card-bd-list-tit">
			              	追号期数
			            </div>
			            <div class="card-bd-list-ct flex-1">
			              	{{info.nper}}期
			            </div>
			        </div>
			        <div class="card-bd-list dis-flex">
			            <div class="card-bd-list-tit">
			              	开始期号
			            </div>
			            <div class="card-bd-list-ct flex-1">
			              	{{info.start_issue}}
			            </div>
			        </div>
			        <div class="card-bd-list dis-flex">
			            <div class="card-bd-list-tit">
			              	结束期号
			            </div>
			            <div class="card-bd-list-ct flex-1">
			              	{{info.end_issue}}
			            </div>
			        </div>
			        <div class="card-bd-list dis-flex">
			            <div class="card-bd-list-tit">
			              	竞猜时间
			            </div>
			            <div class="card-bd-list-ct flex-1 card-bd-time">
			              	{{info.add_time}}
			            </div>
			        </div>
				</div>
				<div class="card-bd-lists-2 flex">
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							追号方案 
						</div>
						<div class="card-bd-list-ct flex-1 lh-66 ft-28">
							全程盈利率不低于30%
						</div>
					</div>
					<div class="card-bd-list dis-flex">
						<div class="card-bd-list-tit">
							追号本金  
						</div>
						<div class="card-bd-list-ct flex-1 lh-66 ft-28">
							共<span>288.00</span>元
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-div t-c">
	      	<a class="btn btn-red btn-circle btn-submit">再猜一次</a>
	    </div>
	</div>
</template>
<script>
	import {getChasingDetail} from '@/api/home';
	export default {
		data(){
			return {
				info:{}
			}
		},
		mounted(){
			this.getChasingDetail();
		},
		methods:{
			getChasingDetail(){
				let id=this.$route.params.id;
				getChasingDetail(id).then(res=>{
					if (res.code==1) {
						res.data.selonArr=res.data.selon?res.data.selon.split(','):[];
						this.info=res.data;
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.detail-container {
	    height: 100%;
		  width: 100%;
		  background: #f9f9f9;
		  padding-top: 18px;
		  box-sizing: border-box;
	}
	.detail-card{
		 height: 936px;
	    width: 690px;
	    margin: auto; 
	    flex-direction: column;
	}
	.hour-bg {
	    height: 192px;
	    background: url(../assets/hour-bg@3x.png);
	    background-size: cover;
	    border-radius: 12px;
	}

	.hour-content-img {
	    margin-left: 46px;
	}
	.hour-img {
	    width: 104px;
	    height: 104px;
	    margin-top: 18px;
	}
	.periods {
	    position: absolute;
	    left: 0;
	    top: 0;
	    padding: 6px 12px;
	    background: rgba(0, 0, 0, 0.1);
	    border-top-left-radius: 15px;
	}
	.hour-content {
	    padding-top: 36px;
	    color: #fff;
	}
	.circle-d {
		width: 30px;
		height: 30px;
		bottom: 0;
		transform: translate(-50%, 50%);
		border-radius: 100%;
		background: #f9f9f9;
		z-index: 999;
    }
    .circle-l {
      	left: 0;
    }
    .circle-r {
      	right: 0;
      	transform: translate(50%, 50%);
    }
    .card-bd {
      	padding-left: 54px;
      	padding-right: 54px;
      	padding-top: 66px;
      	padding-bottom: 40px;
      	background-color: #fff;
  	}
  	.card-bd-lists-1 {
		padding-bottom: 20px;
        border-bottom: 1px solid #f5f5f5;
    }
    .card-bd-list {
      	flex-direction: row;
		margin-bottom: 20px;
    }
    .card-bd-list-tit {
        font-size: 28px;
        color: #958da5;
        line-height: 66px;
        margin-right: 30px;
    }
    .card-bd-list-ct {
        font-size: 32px;
        color: #605477;
        line-height: 66px;
    }
    .cirle {
      display: inline-block;
      color: #ffffff;
      width: 48px;
      height: 48px;
      line-height: 48px;
      border-radius: 100%;
      vertical-align: middle;
      text-align: center;
      margin-right: 10px;
      background-color:#FD4658  ;
      font-size: 24px;
    }
    .card-bd-time{font-size: 28px;color:#958DA5 }
    .card-bd-lists-2{
		padding-top: 40px;
	}
	.bottom-div{position: fixed;bottom: 0;width: 100%;left: 0;padding-bottom: 20px}
</style>